{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
            <div class="example-wrap">
                <div class="example">
                    <div id="distribution" style="width: auto;height: 480px;text-align:center"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{include file="public/footer" /}
<script>
    $(document).ready(function(){
//        pieAjax();
        $.ajax({
            url:"{:url('Age/index')}",
            dataType:'json',
            type:'post',
            data:'',
            success:function (data) {
                pieAjax(data.age);
            }
        })
    });

    function pieAjax(data){
        var myChart = echarts.init(document.getElementById('distribution'));//渲染的对象
        option = {
            title : {
                text: '年龄分布图',
//                subtext: '纯属虚构',
                x:'center',
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
//                data: ['男','女']
            },
//            color:[ '#4472c4','#ed7d31'],
            series : [
                {
                    name: '比例',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:data,//[{'value':10,'name':'男'},{'value':20,'name':'女'}]
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }

</script>
</body>
</html>